<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期演示</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>
</head>

<body>
    <div id="app">
        <p :class="className">{{msg}}</p>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                msg: "hello xlb",
                className:"redBg"
            },
            beforeCreate:function() {  //创造之前
                console.log("beforeCreate")
                console.log(this)
                console.log(this.msg)
                console.log(this.clickEvent)
                //此时数据data和事件方法methods还未绑定到app对象上
            },
            created:function() {
                console.log("created")
                console.log(this)
                console.log(this.msg)
                console.log(this.clickEvent)
            },
            beforeMount:function(){
                //渲染之前，根据数据生成的DOM对象是获取不到的
                console.log('beforeMount')
                let dom =document.querySelector(".redBg");
                console.log(dom)
            },
            mounted:function(){
                //渲染之后，可以数据生成的DOM对象
                console.log('Mounted')
                let dom =document.querySelector(".redBg");
                console.log(dom)
            },
            beforeUpdate:function(){
                //数据更改但内容未更改之前
                console.log('beforeUpdate')
                console.log(this)
                console.log(this.msg)
            },
            updated:function(){
                //内容已更新
                console.log('updated')
                console.log(this)
                console.log(this.msg)
            },
            beforeDestroy:function(){
                //应用销毁之前
                console.log('beforeDestroy')
                console.log(this)
                console.log(this.msg)
            },
            destroyed:function(){
                //应用销毁之后
                console.log('destroyed')
                console.log(this)
                console.log(this.msg)
            },
            methods:{
                clickEvent:function(){

                }
            }
        })

    </script>
</body>

</html>